<template>
	<view>
		<view v-if="load" class="loading-box" :class="{min: type==1}">
			<view class="loading-spinner">
				<view class="circular">
					<view class="path"></view>
				</view>
				<view class="text">加载中...</view>
			</view>
		</view>
		<block v-else>
			<view class="nodata" v-if="nums==0">
				<view class="img"><image src="/static/img/queshengtu/meiyoushuju.png" mode="widthFix"></image></view>
				<view class="name">没有任何数据</view>
			</view>
			<view v-else class="nomore">没有更多了哦~</view>
		</block>
	</view>
</template>

<script>
    let that = null;
    export default {
		name:"loading",
        props: {
            load: {
            	type: Boolean,
            	default: false,
            },
            type: {
            	type: Number,
            	default: function() {
            		return 0;
            	},
            },
            nums: {
            	type: Number,
            	default: function() {
            		return 0;
            	},
            }
        },
        data() {
            return {

            }
        },
        mounted() {
            that = this;
        }
    }
</script>

<style lang="scss">
    .loading-box{
        margin: 0;
        width: 100%;
        height: 100%;
		min-height: 600px;
		position: relative;
        .loading-spinner{
            top: 50%;
            margin-top: -80px;
            width: 100%;
            text-align: center;
            position: absolute;
            .circular{
                height: 42px;
                width: 42px;
				border: 4px solid #409eff;
				border-radius: 50%;
                margin: 0 auto;
				position: relative;
                .path {
					width: 50px;
					height: 12px;
					position: absolute;
					top: 15px;
					left: -4px;
					background: #f8f8f9;
                    animation: loading-rotate 2s linear infinite;
                }
            }
            .text{
				padding-top: 10px;
                font-size: 14px;
                font-weight: normal;
                line-height: 20px;
                color: #666;
            }
        }
    }
	.min{
		height: 30px;margin: 10px 0;min-height: 30px;
		.loading-spinner{
			top:0;
			margin-top: 0;
			.circular{
				width: 14px;height: 14px;border: 2px solid #409eff;display: inline-block;vertical-align: middle;
				.path{width: 20px;height: 6px;top: 4px;left:-3px;}
			}
			.text{display: inline-block;vertical-align: middle;margin-left: 6px;padding-top:0;}
		}
	}
    @keyframes loading-rotate {
        100% {
            transform: rotate(360deg);
        }
    }
</style>